今回は、ツリー形式のリンクを作成する方法を紹介します。ツリー形式のリンクは、さまざまな方法で作成できますが、今回紹介するのはその最も簡単な方法です。シンプルではありますが、コンパクトで使いやすいリンク集を作成できると思いますよ。ぜひ試してみてください。

まずは、階層化されたリンク集をHTMLで作成します。このとき、上の階層となる文字（サンプルでは▼で始まる文字）のリンク先にはJavaScript関数「tree」を指定してください。関数の引数には、下の階層（DIVタグ）のid名を記述しておきます。下の階層（DIVタグ）には、Aタグを利用してリンクを記述します。このDIVタグには、id属性で個別のID名を指定し、さらにstyle属性を「display:none」として、最初はDIVタグが画面に表示されないようにしておきます。 ▼<A href="javaScript:tree('infoseek')">Infoseek</A><BR> <DIV id="infoseek" style="display:none"> −<A href="http://www.infoseek.co.jp/">トップページ（検索）</A><BR> −<A href="http://news.www.infoseek.co.jp/">ニュース</A><BR> −<A href="http://tenki.www.infoseek.co.jp/">天気</A><BR> −<A href="http://tv.www.infoseek.co.jp/">TV番組表</A><BR> −<A href="http://dictionary.www.infoseek.co.jp/">辞書</A><BR> </DIV> ▼<A href="javaScript:tree('rakuten')">楽天</A><BR> <DIV id="rakuten" style="display:none"> −<A href="http://www.rakuten.co.jp/">トップページ</A><BR> −<A href="http://furima.rakuten.co.jp/">フリマ</A><BR> −<A href="http://www.rakuten.co.jp/auction/">スーパーオークション</A><BR> −<A href="http://www.rakuten.co.jp/groupbuy/">共同購入</A><BR> −<A href="http://event.rakuten.co.jp/present/">懸賞市場</A><BR> −<A href="http://event.rakuten.co.jp/ranking/">ランキング市場</A><BR> </DIV>

続いて、下の階層（DIVタグ）の表示／非表示を切り替えるJavaScript関数「tree」を自作します。ここでは、変数「ls」に対象となるDIVタグのスタイルシートを代入します。次に、この変数のdisplayプロパティが「none」であった場合、その値を「block」に変更する処理を行います。これで、マウスのクリックにより下の階層（DIVタグ）を表示できます。さらに、else処理で（DIVタグ）を非表示に戻す処理も追加しておきます。以上で、ツリー形式のリンクは完成です。 <SCRIPT language="JavaScript"> <!-- function tree(LinkName) { ls = document.all[LinkName].style; if(ls.display == 'none') { ls.display = "block" } else { ls.display = "none" } } //--> </SCRIPT>

今回紹介したテクニックは、いくつもの階層があるリンク集も作成できます。以下にその例を示しておくので参考としてください。個々のDIVタグに異なるID名さえ指定すれば、JavaScript関数「tree」を全く変更することなく、いくつでも階層を作成することが可能です。 ▼<A href="javaScript:tree('infoseek')">Infoseek</A><BR> <DIV id="infoseek" style="display:none"> −<A href="http://www.infoseek.co.jp/">トップページ（検索）</A><BR> ▼<A href="javaScript:tree('info_news')">ニュース</A><BR> <DIV id="info_news" style="display:none"> −<A href="http://news.www.infoseek.co.jp/">ニューストップ</A><BR> −<A href="http://news.www.infoseek.co.jp/poli_soci/">政治・社会</A><BR> −<A href="http://news.www.infoseek.co.jp/world/">国際</A><BR> −<A href="http://news.www.infoseek.co.jp/busi_econ/">経済・ビジネス </A><BR> −<A href="http://news.www.infoseek.co.jp/entertainment/">芸能</A><BR> −<A href="http://news.www.infoseek.co.jp/sports/">スポーツ</A><BR> −<A href="http://news.www.infoseek.co.jp/comp/">コンピュータ</A><BR> </DIV> −<A href="http://tenki.www.infoseek.co.jp/">天気</A><BR> −<A href="http://tv.www.infoseek.co.jp/">TV番組表</A><BR> −<A href="http://dictionary.www.infoseek.co.jp/">辞書</A><BR> </DIV>

�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��